<template>
  <div class="contact">
    <van-grid :column-num="1">
      <van-grid-item>
        <p class="title">联系信息</p>
      </van-grid-item>
    </van-grid>
    <div class="wrapper">
      <div class="mam">联系人</div>
      <van-contact-card
          type="edit"
          :name="contactMan.name"
          :tel="contactMan.tel"
          @click="onTel"
      />
    </div>
    <div class="wrapper">
      <div class="mam">微信号</div>
      <div class="wx-info" @click="onShow">
        <div class="msg">
          <div class="logo">
            <van-image width="20" height="20" :src="wxLogo"/>
          </div>
          <div class="text">
            <div>姓名：{{ contactMan.name }}</div>
            <div>微信：{{ contactMan.wx }}</div>
          </div>
        </div>
        <div class="code">
          <van-image width="40" height="40" :src="QR_code"/>
        </div>
      </div>
    </div>
    <div class="wrapper">
      <div class="mam">分享</div>
      <div class="share">
        <van-cell title="立即分享" style="font-size: 14px" @click="showShare = true"/>
      </div>
      <van-share-sheet
          v-model:show="showShare"
          title="立即分享给好友"
          :options="options"
          @select="onSelect"
      />
    </div>

    <van-popup v-model:show="show">
      <van-image width="200" height="200" :src="QR_code"/>
    </van-popup>

  </div>
</template>

<script>
import {reactive, toRefs} from 'vue'
import {Toast} from 'vant';
import wxLogo from '../assets/images/contact/wx.png'
import QR_code from '../assets/images/contact/wx-QR_code.jpg'

export default {
  name: "Contact",
  components: {
    Toast,
  },
  setup() {
    const state = reactive({
      contactMan: {
        name: '陈师傅',
        tel: '13772221338',
        wx: '13772221338',
      },
      show: false,
      showShare: false,
    });
    const options = [
      {name: '微信', icon: 'wechat'},
      {name: '复制链接', icon: 'link'},
      {name: '二维码', icon: 'qrcode'},
    ];

    const onTel = () => {
      window.location.href = `tel:${state.tel}`;
    };

    const onShow = () => {
      state.show = true;
    }
    const onSelect = (option) => {
      console.log(option)
      Toast("加载失败");
      state.showShare = false;
    };
    return {
      ...toRefs(state),
      onTel,
      onShow,
      onSelect,
      options,
      wxLogo,
      QR_code,
    };
  },
}
</script>

<style lang="less">
.contact {
  .title {
    font-size: 16px;
    font-weight: bold;
  }

  .wrapper {
    margin-top: 40px;

    .mam {
      color: #455a6499;
      font-size: 16px;
      margin-left: 10px;
      margin-bottom: 10px;
    }

    .wx-info {
      padding: 16px;
      display: flex;
      background-color: #fff;
      position: relative;
      justify-content: space-between;
      align-items: center;

      .msg {
        display: flex;
        align-items: center;

        .logo {
          margin-right: 10px;
        }

        .text {
          font-size: 14px;
          color: #3e3e3e;

          div {
            margin: 6px 0;
          }
        }
      }

      .code {
        margin-right: 20px;
      }
    }

    .wx-info::before {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: 2px;
      content: "";
      background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%) 0 0/80px;
    }

    .share {
      position: relative;
      height: 50px;
      background-color: #ffffff;
    }

    .share::before {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: 2px;
      content: "";
      background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%) 0 0/80px;
    }
  }
}

.van-cell__left-icon {
  margin-right: 4px;
  color: #f40;
  font-size: 20px !important;
}
</style>